<?php
$p = \Yii::$app->controller->module->templateAsset."/yewaijiaoyou/";
?>

 <style type="text/css">
	
*
{
    padding: 0px;
    margin: 0px;
    -webkit-box-sizing: border-box;
}

body
{
    background-color: black;
}

#container
{
    width: 500px;
    height: 815px;
    position: absolute;
    overflow: hidden;
}
#container > div,#container >img
{
    position: absolute;
}
#bg
{
    top: 0px;
    left: 0px;
    -webkit-animation: fadein 3s linear infinite alternate;
}
.yezi1
{
    -webkit-transform-origin: 40% 20%;
    left: -120px;
    top: 144px;
    -webkit-animation: yezimoving 2s linear infinite alternate;
}
.yezi2
{
    -webkit-transform-origin: 40% 20%;
    -webkit-transform: rotate(83deg) scale(1,-1);
    left: -139px;
    top: 154px;
    -webkit-animation: yezimoving2 2.5s ease-in-out infinite alternate;
}
#chuan
{
    position: absolute;
    left: 20px;
    top: 653px;
    -webkit-animation: chuanmoving 2s ease-out infinite alternate;
}
#biaoti1
{
    width: 510px;
    height: 500px;
    top: 120px;
    left: -500px;
	z-index:111;
}

.divv
{
    position: absolute;
    width: 400px;
    height: 600px;
    border: 7px solid #ADDB44;
    top: 93px;
    left: 50px;
    background-color: #fff;
    overflow: hidden;
    opacity: 0;
}
#box1_1
{
    width: 500px;

}

.divh
{
    width: 470px;
    height: 310px;
    border: 7px solid #ADDB44;
    background-color: #fff;
    left: 15px;
    top: 230px;
    overflow: hidden;
    opacity: 0;
    position: absolute;
}
#boxv2_1
{
    width: 500px;
    overflow: hidden;
    height: 395px;
    position: absolute;
    -webkit-transform: translate(-500px,0px);
}
#divv2_1,#divh2_1
{
    -webkit-transform: translate(500px,0px);
}
#boxv2_2
{
    width: 500px;
    overflow: hidden;
    height: 500px;
    top: 395px;
    position: absolute;
    -webkit-transform: translate(500px,0px);
}
#divv2_2
{
    top: -302px;
    -webkit-transform: translate(-500px,0px);
}
#boxh2_1
{
    width: 500px;
    height: 385px;
    position: absolute;
    overflow: hidden;
    -webkit-transform: translate(-500px,0px);
}
#boxh2_2
{
    width: 500px;
    height: 400px;
    top: 385px;
    position: absolute;
    overflow: hidden;
     -webkit-transform: translate(-500px,0px);
}
#divh2_2
{
    top: -155px;
     -webkit-transform: translate(500px,0px);
}
#boxv3_1
{
    position: absolute;
    width: 250px;
    height: 700px;
    overflow: hidden;
    -webkit-transform-origin: 20% 50%;
    -webkit-transform: perspective(1200px) rotateY(90deg);
}
#boxv4_1,#boxh4_1
{
    position: absolute;
    width: 250px;
    height: 700px;
    overflow: hidden;
    opacity: 0;
}
#boxv4_2,#boxh4_2
{
    position: absolute;
    width: 250px;
    height: 700px;
    overflow: hidden;
    left: 250px;
    opacity: 0;
}
#boxh3_1
{
    position: absolute;
    width: 250px;
    height: 700px;
    overflow: hidden;
    -webkit-transform-origin: 5% 50%;
    -webkit-transform: perspective(1200px) rotateY(90deg);
}
#boxv3_2
{
    position: absolute;
    width: 250px;
    height: 700px;
    overflow: hidden;
    left: 250px;
    -webkit-transform-origin: 80% 50%;
    -webkit-transform: perspective(1200px) rotateY(-90deg);
}
#boxh3_2
{
    position: absolute;
    width: 250px;
    height: 700px;
    overflow: hidden;
    left: 250px;
    -webkit-transform-origin: 95% 50%;
    -webkit-transform: perspective(1200px) rotateY(-90deg);
}
#divv3_2,#divv4_2
{
    left: -200px;
}
#divh3_2,#divh4_2
{
    left: -235px;
}
.img
{
    position: absolute;
}
#zongzi
{
    width: 350px;
    top: 567px;
    left: 145px;
    -webkit-transform: translate(360px,0px);
}
</style>
<style type="text/css">
@-webkit-keyframes fadein
{
    from  {opacity: 0}
    to    {opacity: 1}
}
@-webkit-keyframes fadeout
{
    from  {opacity: 1}
    to    {opacity: 0}
}
@-webkit-keyframes yezimoving
{
    from  {-webkit-transform: rotate(-4deg);}
    to    {-webkit-transform: rotate(4deg);}
}
@-webkit-keyframes yezimoving2
{
    from  {-webkit-transform: rotate(83deg) scale(1,-1);}
    to    {-webkit-transform: rotate(75deg) scale(1,-1);}
}
@-webkit-keyframes chuanmoving
{
    from  {-webkit-transform: translate(0px,0px);}
    to    {-webkit-transform: translate(0px,-20px);}
}
@-webkit-keyframes title_in
{
    from  {-webkit-transform: translate(0px,0px)}
    to    {-webkit-transform: translate(500px,0px);}
}
@-webkit-keyframes title_out
{
    from  {-webkit-transform: translate(500px,0px);opacity: 1}
    to    {-webkit-transform: translate(1000px,0px);opacity: 0}
}
@-webkit-keyframes pagev1_1_in
{
    0%    {opacity: 0;-webkit-transform: translate(260px,-78px);}
    90%   {opacity: 0.8;-webkit-transform: translate(-10px,3px);}
    100%  {opacity: 1;-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes pagev1_1_out
{
    100%  {opacity: 0;-webkit-transform: translate(-260px,78px);}
    10%   {opacity: 0.8;-webkit-transform: translate(10px,-3px);}
    0%    {opacity: 1;-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes pagev1_2_in
{
    0%    {opacity: 0;-webkit-transform: translate(-260px,78px);}
    90%   {opacity: 0.8;-webkit-transform: translate(10px,-3px);}
    100%  {opacity: 1;-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes pagev1_2_out
{
    100% {opacity: 0;-webkit-transform: translate(260px,-78px);}
    10%  {opacity: 0.8;-webkit-transform: translate(-10px,3px);}
    0%   {opacity: 1;-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes pageh1_1_in
{
    0%   {opacity: 0;-webkit-transform: translate(260px,-43px);}
    90%  {opacity: 0.8;-webkit-transform: translate(-14px,2px);}
    100% {opacity: 1;-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes pageh1_1_out
{
    100%   {opacity: 0;-webkit-transform: translate(-260px,43px);}
    10%  {opacity: 0.8;-webkit-transform: translate(14px,-2px);}
    0%   {opacity: 1;-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes pageh1_2_in
{
    0%   {opacity: 0;-webkit-transform: translate(-260px,43px);}
    90%  {opacity: 0.8;-webkit-transform: translate(14px,-2px);}
    100% {opacity: 1;-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes pageh1_2_out
{
    100% {opacity: 0;-webkit-transform: translate(260px,-43px);}
    10%  {opacity: 0.8;-webkit-transform: translate(-14px,2px);}
    0%   {opacity: 1;-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes page2_boxv1_in
{
    from  {-webkit-transform: translate(-500px,0px);}
    to    {-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes page2_boxv1_out
{
    from  {-webkit-transform: translate(0px,0px);}
    to    {-webkit-transform: translate(-500px,0px);}
}
@-webkit-keyframes page2_divv1_in
{
    from  {-webkit-transform: translate(500px,0px);}
    to    {-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes page2_divv1_out
{
    from  {-webkit-transform: translate(0px,0px);}
    to    {-webkit-transform: translate(500px,0px);}
}
@-webkit-keyframes boxv3_1_in
{
    from  {-webkit-transform: perspective(1200px) rotateY(90deg);opacity: 0}
    to    {-webkit-transform: perspective(1200px) rotateY(0deg);opacity: 1}
}
@-webkit-keyframes boxv3_1_out
{
    from  {-webkit-transform: perspective(1200px) rotateY(0deg);opacity: 1}
    to    {-webkit-transform: perspective(1200px) rotateY(-90deg);opacity: 0} 
}
@-webkit-keyframes boxv3_2_in
{
    from  {-webkit-transform: perspective(1200px) rotateY(-90deg);opacity: 0}
    to    {-webkit-transform: perspective(1200px) rotateY(0deg);opacity: 1}
}
@-webkit-keyframes boxv3_2_out
{
    from  {-webkit-transform: perspective(1200px) rotateY(0deg);opacity: 1}
    to    {-webkit-transform: perspective(1200px) rotateY(90deg);opacity: 0}
}
@-webkit-keyframes zongzi_in
{
    from  {-webkit-transform: translate(360px,0px);}
    to    {-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes zongzi_out
{
    from  {-webkit-transform: translate(0px,0px);}
    to    {-webkit-transform: translate(360px,0px);}
}
@-webkit-keyframes chuanbox_out
{
    from  {-webkit-transform: translate(0px,0px);}
    to    {-webkit-transform: translate(0px,400px);}
}
@-webkit-keyframes chuanbox_in
{
    from  {-webkit-transform: translate(0px,400px);}
    to    {-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes binking
{
    0%  {opacity: 1}
    50% {opacity: 0.8}
    100%{opacity: 1}
}
.fengzheng1{    width: 39%;
    left: 59%;
	-webkit-transform-origin: 100% 100%;
    -webkit-animation: fengzheng1 4s ease-in-out infinite alternate;}
 @-webkit-keyframes fengzheng1
    {
        from{-webkit-transform:rotate(-5deg);}
        to{-webkit-transform:rotate(5deg);}
    }	
.fengzheng2{   width: 25%;
    left: 52%;
    top: 3%;-webkit-transform-origin: 100% 100%;
    -webkit-animation: fengzheng2 4s ease-in-out infinite alternate;}
	 @-webkit-keyframes fengzheng2
    {
        from{-webkit-transform:rotate(-5deg);}
        to{-webkit-transform:rotate(5deg);}
    }	
	
</style>

<div id='container'>
    <img style='width: 100%;height: 100%;' src='<?=$p?>images/TB2HsSmqpXXXXaaXXXXXXXXXXXX_!!1016194477.jpg'>
    <img id='bg'style='width: 100%;height: 100%;' src='<?=$p?>images/TB2HsSmqpXXXXaaXXXXXXXXXXXX_!!1016194477.jpg'>

   
    

    <img id='biaoti1'  src='<?=$p?>images/TB2pfelqpXXXXXYXXXXXXXXXXXX_!!1016194477.png'>

    <img class='fengzheng1'  src='<?=$p?>images/TB2N_01qpXXXXcCXXXXXXXXXXXX_!!1016194477.png'>
	<img class='fengzheng2'  src='<?=$p?>images/TB2uFBMqpXXXXaJXpXXXXXXXXXX_!!1016194477.png'>
    <div id='page1'>
        <div id='divv1_1' class='divv'>
            <img id='imgv1_1' class='img'>
        </div>
        <div id='divv1_2' class='divv'>
            <img id='imgv1_2' class='img'>
        </div>

        <div id='divh1_1' class='divh'>
            <img id='imgh1_1' class='img'>
        </div>

        <div id='divh1_2' class='divh'>
            <img id='imgh1_2' class='img'>
        </div>
    </div>

    <div id='page2'>
        <div id='boxv2_1'>
            <div id='divv2_1' class='divv' style='opacity:1'>
                <img id='imgv2_1' class='img'>
            </div>
        </div>
        <div id='boxv2_2'>
            <div id='divv2_2' class='divv' style='opacity:1'>
                <img id='imgv2_2' class='img'>
            </div>
        </div>

        <div id='boxh2_1'>
            <div id='divh2_1' class='divh' style='opacity:1'>
                <img id='imgh2_1' class='img'>
            </div>
        </div>
        <div id='boxh2_2'>
            <div id='divh2_2' class='divh' style='opacity:1'>
                <img id='imgh2_2' class='img'>
            </div>
        </div>
    </div>

    <div id='page3'>
        <div id='boxv3_1'>
            <div id='divv3_1' class='divv' style='opacity:1;'>
                <img id='imgv3_1' class='img'>
            </div>
        </div>
        <div id='boxv3_2'>
            <div id='divv3_2' class='divv' style='opacity:1;'>
                <img id='imgv3_2' class='img'>
            </div>
        </div>

        <div id='boxh3_1'>
            <div id='divh3_1' class='divh' style='opacity:1;'>
                <img id='imgh3_1' class='img'>
            </div>
        </div>
        <div id='boxh3_2'>
            <div id='divh3_2' class='divh' style='opacity:1;'>
                <img id='imgh3_2' class='img'>
            </div>
        </div>
    </div>

    <div id='page4'>
        <div id='boxv4_1'>
            <div id='divv4_1' class='divv' style='opacity:1;'>
                <img id='imgv4_1' class='img'>
            </div>
        </div>
        <div id='boxv4_2'>
            <div id='divv4_2' class='divv' style='opacity:1;'>
                <img id='imgv4_2' class='img'>
            </div>
        </div>

        <div id='boxh4_1'>
            <div id='divh4_1' class='divh' style='opacity:1;'>
                <img id='imgh4_1' class='img'>
            </div>
        </div>
        <div id='boxh4_2'>
            <div id='divh4_2' class='divh' style='opacity:1;'>
                <img id='imgh4_2' class='img'>
            </div>
        </div>
    </div>



    <div id='pagetitle' style='z-index:112;position:absolute;width:500px;height:187px;top:282px;border-bottom: 1px solid rgba(255,255,255,0.2);border-top: 1px solid rgba(255,255,255,0.2);opacity:0;'>
        <div style='position:absolute;width:350px;height:187px;left:75px;overflow:hidden;display:table;'>
            <div id='titlecontent' style='width:350px;height:187px;vertical-align:middle;display:table-cell;text-align:center;font-size:30px;line-height:45px;color:#585353;z-index:112;'></div>
        </div>
    </div>

</div>
<script>
function id(name)
{
    return document.getElementById(name)
}

function showtitle()
{
    id('biaoti1').style.webkitAnimation = 'title_in 0.8s ease-out both';
    id('pagetitle').style.webkitAnimation = 'fadein 0.5s 0.3s linear both';
    id('titlecontent').innerHTML = desc;

}

function liangziyun_kawa()
{
    id('biaoti1').style.webkitAnimation = 'title_out 0.8s 0.2s linear both';
    id('pagetitle').style.webkitAnimation = 'fadeout 0.5s linear both';

    timeout[1] = setTimeout(show1,1000)
}

function show1()
{
    setImage('1');
    showpage(1);
    id('divv1_1').style.webkitAnimation = 'pagev1_1_in 1s ease-out both';
    id('divv1_2').style.webkitAnimation = 'pagev1_2_in 1s ease-out both';
    id('divh1_1').style.webkitAnimation = 'pageh1_1_in 1s ease-out both';
    id('divh1_2').style.webkitAnimation = 'pageh1_2_in 1s ease-out both';

    id('imgh1_1').style.webkitAnimation = 'binking 0.5s 1.5s linear both';
    id('imgh1_2').style.webkitAnimation = 'binking 0.5s 1.5s linear both';
    id('imgv1_1').style.webkitAnimation = 'binking 0.5s 1.5s linear both';
    id('imgv1_2').style.webkitAnimation = 'binking 0.5s 1.5s linear both';

    timeout[2] = setTimeout(clear1,4000)
}

function clear1()
{
    id('divv1_1').style.webkitAnimation = 'pagev1_1_out 1s linear both';
    id('divv1_2').style.webkitAnimation = 'pagev1_2_out 1s linear both';
    id('divh1_1').style.webkitAnimation = 'pageh1_1_out 1s linear both';
    id('divh1_2').style.webkitAnimation = 'pageh1_2_out 1s linear both';

    timeout[3] = setTimeout(show2,1000)
}

function show2()
{
    setImage('2');
    showpage(2);
    id('boxv2_1').style.webkitAnimation = 'page2_boxv1_in 1s linear both';
    id('divv2_1').style.webkitAnimation = 'page2_divv1_in 1s linear both';
    id('boxv2_2').style.webkitAnimation = 'page2_divv1_in 1s linear both';
    id('divv2_2').style.webkitAnimation = 'page2_boxv1_in 1s linear both';

    id('boxh2_1').style.webkitAnimation = 'page2_boxv1_in 1s linear both';
    id('divh2_1').style.webkitAnimation = 'page2_divv1_in 1s linear both';

    id('boxh2_2').style.webkitAnimation = 'page2_divv1_in 1s linear both';
    id('divh2_2').style.webkitAnimation = 'page2_boxv1_in 1s linear both';

 

    timeout[4] = setTimeout(clear2,4000)
}

function clear2()
{
    id('boxv2_1').style.webkitAnimation = 'page2_boxv1_out 1s linear both';
    id('divv2_1').style.webkitAnimation = 'page2_divv1_out 1s linear both'; 
    id('boxv2_2').style.webkitAnimation = 'page2_divv1_out 1s linear both';
    id('divv2_2').style.webkitAnimation = 'page2_boxv1_out 1s linear both'; 

    id('boxh2_1').style.webkitAnimation = 'page2_boxv1_out 1s linear both';
    id('divh2_1').style.webkitAnimation = 'page2_divv1_out 1s linear both'; 
    id('boxh2_2').style.webkitAnimation = 'page2_divv1_out 1s linear both';
    id('divh2_2').style.webkitAnimation = 'page2_boxv1_out 1s linear both'; 

    timeout[5] = setTimeout(show3,1000)
}

function show3()
{
    showpage(3);
    setImage('3');
    id('boxv3_1').style.webkitAnimation = 'boxv3_1_in 1s ease-out both';
    id('boxv3_2').style.webkitAnimation = 'boxv3_2_in 1s ease-out both';

    id('boxh3_1').style.webkitAnimation = 'boxv3_1_in 1s ease-out both';
    id('boxh3_2').style.webkitAnimation = 'boxv3_2_in 1s ease-out both';
// 本模板为深圳量子云科技有限公司版权所有 抄袭必究
    timeout[6] = setTimeout(clear3,4000)
}

function clear3()
{
    id('boxv3_1').style.webkitAnimation = 'boxv3_1_out 1s ease-in both';
    id('boxv3_2').style.webkitAnimation = 'boxv3_2_out 1s ease-in both';

    id('boxh3_1').style.webkitAnimation = 'boxv3_1_out 1s ease-in both';
    id('boxh3_2').style.webkitAnimation = 'boxv3_2_out 1s ease-in both';

    timeout[7] = setTimeout(show4,1000)
}

function show4()
{
    showpage(4);
    setImage('4');
    id('boxv4_2').style.webkitAnimation = 'fadein 0.5s linear both';
    id('boxv4_1').style.webkitAnimation = 'fadein 0.5s 0.3s linear both';

    id('boxh4_2').style.webkitAnimation = 'fadein 0.5s linear both';
    id('boxh4_1').style.webkitAnimation = 'fadein 0.5s 0.3s linear both';

    id('imgh4_2').style.webkitAnimation = 'binking 0.5s 2s linear both';
    id('imgv4_2').style.webkitAnimation = 'binking 0.5s 2s linear both';
    id('imgh4_1').style.webkitAnimation = 'binking 0.5s 2.3s linear both';
    id('imgv4_1').style.webkitAnimation = 'binking 0.5s 2.3s linear both';

    timeout[8] = setTimeout(clear4,4000)
}

function clear4()
{
    id('boxv4_2').style.webkitAnimation = 'fadeout 0.5s linear both';
    id('boxv4_1').style.webkitAnimation = 'fadeout 0.5s 0.3s linear both';

    id('boxh4_2').style.webkitAnimation = 'fadeout 0.5s linear both';
    id('boxh4_1').style.webkitAnimation = 'fadeout 0.5s 0.3s linear both';

    

    timeout[9] = setTimeout(show1,1000)
}
var image_size_width=[];
var image_size_height=[];
var image_url_index=0;
var have_num = 0;
var error_num = 0;
var canshow = true;
var reshow = false;
var delaytime=4000;
var timeout = [];
//每次执行加载后10张图片
var bl_keepload = 'first';
var step_loadnum = 5;
function step_load()
{
    var load_num = 0
    //初步加载X张
    if(image_url_index  == 0 && bl_keepload == 'first')
    {
        console.log('loading continue');
        if(slider_images_url.length > step_loadnum)
        {
            load_num = step_loadnum;
            bl_keepload = 'next';
        }
        else
        {
            load_num = slider_images_url.length;
            bl_keepload = 'end';
        }
        for(var i = 0; i< load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
    else if(bl_keepload == 'end')
    {
        return;
    }
    else
    {
         console.log('loading continue');
        if(slider_images_url.length - image_url_index >step_loadnum*2)
        { 
            load_num = step_loadnum;
        }
        else
        {
            load_num = slider_images_url.length - image_url_index - step_loadnum;
            bl_keepload = 'end';
        }
        for(var i = image_url_index +step_loadnum; i< image_url_index + step_loadnum + load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }

}
function load_images()
{
    reshow = false;
    image_size_width=[];
    image_size_height=[];
    Onload_imgs_url=[];
    image_url_index=0;
    have_num = 0;
    error_num = 0;
    begin_titletime = new Date();
    begin_titletime = begin_titletime.getTime();
    canshow = true;
    showtitle();
    bl_keepload = 'first';
    // loading_first(); 
    step_load();     
}

function image_onerror(event)
{
    var img = event.target;
    var index = img.index;
    if(index<step_loadnum)
        error_num ++;
    Onload_imgs_url[index] = 'not find';
    // console.log(Onload_imgs_url[index]);
    // console.log(have_num + '-' + error_num);
    if((have_num+error_num >= step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        // loading_others();
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            liangziyun_kawa();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    liangziyun_kawa();
                },dis_titletime);
        }
    }
}

function image_onload(event)
{
    if(reshow == true)
        return;

    var img = event.target;
    var index = img.index;

    if(index<step_loadnum)
    {
        have_num++;
    }
    Onload_imgs_url[index] = img.src;
    image_size_height[index] = img.height;
    image_size_width[index] = img.width;

    console.log(Onload_imgs_url[index]);
    // console.log(have_num + '-' + error_num);

    if((have_num + error_num >= step_loadnum ||slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        // loading_others();
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            liangziyun_kawa();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    liangziyun_kawa();
                },dis_titletime);
        }

    }
}

function setImage(idname)
{
    if(reshow == true)
        return;

    while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
    {
        if(image_url_index % step_loadnum == 0)
        {
            step_load();
        }
        image_url_index++;
        if(image_url_index == Onload_imgs_url.length)
            image_url_index = 0;
    }

    var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];


    if(image_url_index % step_loadnum == 0)
    {
        step_load();
    }

    var imgshow1;
    var imgshow2;
    var divshow1;
    var divshow2;
    var divdis1;
    var divdis2;

    if(img_bili > 1)
    {
        width = 470;
        height = 310;
        imgshow1 = id('imgh'+idname + '_1');
        imgshow2 = id('imgh'+idname + '_2');
        if(idname == '1')
        {
            divshow1 = id('divh'+idname + '_1');
            divshow2 = id('divh'+idname + '_2');
            divdis1 = id('divv' + idname + '_1');
            divdis2 = id('divv' + idname + '_2')
        }
        else
        {
            divshow1 = id('boxh'+idname + '_1');
            divshow2 = id('boxh'+idname + '_2');
            divdis1 = id('boxv' + idname + '_1');
            divdis2 = id('boxv' + idname + '_2')   
        }
    }
    else
    {
        width = 400;
        height = 600;
        imgshow1 = id('imgv'+idname + '_1');
        imgshow2 = id('imgv'+idname + '_2');
        if(idname == '1')
        {
            divshow1 = id('divv'+idname + '_1');
            divshow2 = id('divv'+idname + '_2');
            divdis1 = id('divh' + idname + '_1');
            divdis2 = id('divh' + idname + '_2')
        }
        else
        {
            divshow1 = id('boxv'+idname + '_1');
            divshow2 = id('boxv'+idname + '_2');
            divdis1 = id('boxh' + idname + '_1');
            divdis2 = id('boxh' + idname + '_2')   
        }
    }

    divshow1.style.display = 'block';
    divshow2.style.display = 'block';
    divdis1.style.display = 'none';
    divdis2.style.display = 'none';


    imgshow1.src = Onload_imgs_url[image_url_index];
    imgshow2.src = Onload_imgs_url[image_url_index];
    console.log('setimg:'+imgshow1.src);

    if(img_bili > (width/height))
    {
        imgshow1.style.top = '0px';
        imgshow2.style.top = '0px';
        imgshow1.style.height = height + 'px';
        imgshow2.style.height = height + 'px';
        imgshow1.style.width = height*img_bili + 'px';
        imgshow2.style.width = height*img_bili + 'px';
        imgshow1.style.left = -((height*img_bili-width)/2)+'px';
        imgshow2.style.left = -((height*img_bili-width)/2)+'px';
    }
    else
    {
        imgshow1.style.left = '0px';
        imgshow2.style.left = '0px';
        imgshow1.style.width = width+'px';
        imgshow2.style.width = width+'px';
        imgshow1.style.height = width/img_bili + 'px';
        imgshow2.style.height = width/img_bili + 'px';
        imgshow1.style.top = -((width/img_bili-height)/2) + 'px';
        imgshow2.style.top = -((width/img_bili-height)/2) + 'px';
    }

    image_url_index++;
    if(image_url_index==Onload_imgs_url.length)
        image_url_index = 0;


}
function showpage(index)
{
    for(var i=1;i<5;i++)
    {
        if(i == index)
            id('page'+i).style.display = 'block';
        else
            id('page'+i).style.display = 'none';
    }
}
call_me(load_images);
function reload_scene()
{
    clearnode();
    reshow = true;
    setTimeout(load_images,100);
}

function clearnode()
{
    id('pagetitle').style.webkitAnimation = '';
    for(var i = 0; i < timeout.length ; i++)
    {
        clearTimeout(timeout[i]);
    }
    for(var i = 1; i<5;i++)
    {
        id('page'+i).style.display = 'none';
    }

}
</script>